@import 'mixins';
@import 'vars';

sqx-code {
    pre {
        white-space: pre;
    }
}

:host ::ng-deep {
    svg {
        max-height: 100%;
    }

    h3 {
        margin-top: 1.75rem;
    }

    .code-container {
        margin: .5rem 0;
    }
}

.badge {
    @include circle(1.3rem);
    font-size: $font-smallest;
    font-weight: normal;
    margin-right: .25rem;
    padding-left: 0;
    padding-right: 0;
    vertical-align: top;
}

.section {
    margin-top: 2rem;
}

.step {
    padding-left: 1.75rem;

    h5 {
        margin-left: -1.75rem;
    }
}

.sdk-header {
    border: 1px solid $color-border;
    border-radius: $border-radius;
    display: inline-block;
    cursor: pointer;
    padding: 1rem;
    margin-bottom: .5rem;
    margin-right: .5rem;
    width: 160px;
    text-align: center;

    &.active {
        border-color: $color-theme-brand;
    }

    &:hover {
        border-color: $color-theme-brand-dark;
    }

    .logo {
        height: 100px;
    }
}

.option {
    background: none;
    border: 1px solid $color-border;
    border-radius: $border-radius;
    cursor: pointer;
    margin-top: .5rem;
    padding: 1rem;
    padding-right: 0;
    position: relative;

    &:hover {
        border-color: darken($color-border, 10%);
    }

    i {
        @include absolute(1.6rem, 1rem, auto, auto);
        color: $color-border;
        font-size: $font-smallest;
        font-weight: normal;
    }
}